<template>
  <div class="distributor-ranking-table">
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
    <div v-else-if="distributors.length === 0" class="empty-state">
      暂无数据
    </div>
    <table v-else class="ranking-table">
      <thead>
        <tr>
          <th class="rank-col">排名</th>
          <th class="distributor-col">分销商</th>
          <th class="commission-col">佣金金额</th>
          <th class="orders-col">订单数</th>
          <th class="rate-col">佣金比例</th>
          <th class="action-col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(distributor, index) in distributors" :key="distributor.id">
          <td class="rank-col">
            <div class="rank-badge" :class="getRankClass(index)">{{ index + 1 }}</div>
          </td>
          <td class="distributor-col">
            <div class="distributor-info">
              <img :src="distributor.avatar" :alt="distributor.name" class="distributor-avatar">
              <span class="distributor-name">{{ distributor.name }}</span>
            </div>
          </td>
          <td class="commission-col">¥{{ formatNumber(distributor.commission) }}</td>
          <td class="orders-col">{{ distributor.orderCount }}</td>
          <td class="rate-col">{{ distributor.commissionRate }}%</td>
          <td class="action-col">
            <button class="view-button" @click="viewDistributor(distributor.id)">查看</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 定义组件属性
const props = defineProps({
  distributors: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 加载状态
const loading = ref(false);

// 格式化数字（千分位）
const formatNumber = (num: number) => {
  return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// 根据排名获取样式类名
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-first';
  if (index === 1) return 'rank-second';
  if (index === 2) return 'rank-third';
  return '';
};

// 查看分销商详情
const viewDistributor = (id: string) => {
  router.push(`/agent/distributors/${id}`);
};

// 组件挂载后
onMounted(() => {
  // 模拟加载过程
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
});
</script>

<style lang="scss" scoped>
.distributor-ranking-table {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  
  th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  
  th {
    font-weight: 600;
    color: #333;
    background-color: #f9f9f9;
  }
  
  tr:hover {
    background-color: #f5f5f5;
  }
  
  .rank-col {
    width: 80px;
  }
  
  .distributor-col {
    width: 30%;
  }
  
  .commission-col {
    width: 15%;
    font-weight: 600;
    color: #FF4757;
  }
  
  .orders-col, .rate-col {
    width: 15%;
  }
  
  .action-col {
    width: 100px;
    text-align: center;
  }
}

.rank-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #ddd;
  color: #333;
  font-weight: 600;
  
  &.rank-first {
    background-color: #FFD700;
    color: #fff;
  }
  
  &.rank-second {
    background-color: #C0C0C0;
    color: #fff;
  }
  
  &.rank-third {
    background-color: #CD7F32;
    color: #fff;
  }
}

.distributor-info {
  display: flex;
  align-items: center;
}

.distributor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.distributor-name {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-button {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background-color: #FF4757;
    color: #fff;
  }
}

.loading-state, .empty-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #FF4757;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text, .empty-state {
  font-size: 14px;
  color: #999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .ranking-table {
    font-size: 12px;
    
    th, td {
      padding: 8px;
    }
    
    .orders-col, .rate-col {
      display: none;
    }
    
    .distributor-col {
      width: 40%;
    }
  }
}
</style> 